<template>
  <div class="admin-login">
    <div class="row">
      <div class="row-tittle">
        <h2>管理员登录</h2>
      </div>
      <div class="row-content">
        <el-form label-width="80px" ref="form" :model="form" :rules="rules">
          <el-form-item label="" prop="adminName">
            <el-input placeholder="请输入账号" v-model="form.adminName"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input show-password placeholder="请输入密码" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="login">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { adminLoginService } from '../../api/admin'
export default {
  data () {
    return {
      form: {
        adminName: '',
        password: ''
      },
      rules: {
        adminName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^[/\S]{4,8}$/, message: '长度在 4 到 8 个非空字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[/\S]{4,15}$/, message: '长度在 4 到 15 个非空字符', trigger: 'blur' }]
      }
    }
  },
  created () {

  },
  methods: {
    async login () {
      await this.$refs.form.validate()
      const res = await adminLoginService(this.form)
      res.status === 0 ? await Message.success(res.message) : await Message.error(res.message)
      this.$store.commit('adminStore/setAdminInfo', {
        adminId: res.data.adminId,
        ADMIN_TOKEN: 'Bearer ' + res.data.token
      })
      this.$router.push('/admin/home')
    }
  }
}
</script>

<style lang="less" scoped>
.admin-login{
  width: 100%;
  min-height: 700px;
  background: url(../../assets/bgi.png) no-repeat;
  background-size: 100%;
  background-attachment: fixed;
  position: relative;
  .row{
    position: absolute;
    left: 50%;
    top: 50%;
    transform:  translate(-50% , -50%);
    width:600px;
    height: 300px;
    box-shadow: 5px 5px 10px 7px #585858;
    text-align: center;
    background: rgba(3, 19, 42, 0.5);
    .row-tittle{
      margin: 30px auto;
      color: #f0f0f0;
    }
    .row-content{
      margin: 0 auto;
      width: 80%;
      color: #f0f0f0;
      /deep/ .el-form-item__content{
        margin-left: 0 !important;
      }
      /deep/ .el-input__inner{
        background: transparent;
        border: 0px solid #000;
        transition: all 0.5s;
        &:focus{
          border: 1px solid #000;
          transform: scale(1.1);
        }
      }
      /deep/ .el-button{
        width: 100%;
      }
    }
  }

}
</style>
